<!DOCTYPE html>
<html lang="en">
  <head> </head>
  <body>
    <style>
      .div {
        width: 200px;
        height: 200px;
        border: 1px solid #ff0;
        position: relative;
      }
      .div::before {
        content: "";
        width: 0;
        height: 0;
        border: 20px solid;
        position: absolute;
        bottom: -40px;
        left: 140px;
        border-color: #ff0 transparent transparent;
      }
      .div::after {
        content: "";
        width: 0;
        height: 0;
        border: 20px solid;
        position: absolute;
        bottom: -36px;
        left: 140px;
        border-color: #fff transparent transparent;
      }
      .div1 {
        width: 0;
        height: 0;
        border: 50px solid;
        border-color: yellow #fff #fff #fff;
      }
    </style>
    <div class="div"></div>

    <p>1.下面是一个div.长宽为50*50的正方形，边框宽度为50</p>
    <div class="div1"></div>
  </body>
</html>
